<template>
  <div id="app" class="login">
    <div class="login-header">
      <img :src="logo" alt />
      <span>挖挖帮</span>
    </div>
    <div class="login-title">我们提供便利快捷的一站式接单服务</div>
    <van-form class="login-form">
      <van-field v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号" clearable />
      <van-field v-model="pwd" type="password" placeholder="请输入密码" clearable />
      <div class="login-form__button" :class="{active: isMoblie && pwd !== ''}">
        <van-button round block type="info" @click="onSubmit">登 录</van-button>
      </div>
      <div class="login-form__tip">
        <span @click="onOpenWin('register')">注册用户</span>
        <span @click="onOpenWin('forget')">忘记密码</span>
      </div>
    </van-form>

    <van-dialog
      v-model="show"
      :title="'发现新版本' + version"
      show-cancel-button
      confirmButtonText="立即更新"
      confirmButtonColor="#e4393c"
      cancelButtonText="暂不更新"
      @confirm="onConfirm"
    >
      <van-cell title="更新描述: ">
        <template #label>
          <van-cell :title="updateTip" />
        </template>
      </van-cell>
      <!-- <van-cell title="发布时间" :value="time" /> -->
      <!-- <van-cell
        title="下载地址"
        :value="source"
        v-clipboard:copy="source"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        <template #right-icon>
          <van-icon name="down" />
        </template>
      </van-cell> -->
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      logo: require("./../../assets/logo.png"),
      mobile: "",
      pwd: "",
      isMoblie: false,
      version: "",
      updateTip: "",
      time: "",
      source: "",
      show: false
    };
  },
  watch: {
    // 监听手机号
    mobile(newVal) {
      this.isMoblie = /^1[3456789]\d{9}$/.test(newVal);
    }
  },
  created() {
    if (this.$storage.has("mobile")) {
      this.mobile = this.$storage.get("mobile");
      this.pwd = this.$storage.get("pwd");
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.checkUpdate();
      }, 20);
    });
  },
  methods: {
    // 手动检查更新
    checkUpdate() {
      const _this = this;
      var mam = window.api.require("mam");
      mam.checkUpdate(function(ret, err) {
        if (ret) {
          var result = ret.result;
          if (result.update == true && result.closed == false) {
            _this.version = result.version;
            _this.updateTip = result.updateTip;
            _this.source = result.source;
            _this.time = result.time;
            _this.show = true;
          } else {
            _this.show = false;
          }
        } else {
          window.api.alert({
            msg: err.msg
          });
        }
      });
    },
    // 确认更新
    onConfirm() {
      this.show = false;
      if (window.api.systemType == "android") {
        window.api.download(
          {
            url: this.source,
            report: true
          },
          function(ret) {
            if (ret && 0 == ret.state) {
              /* 下载进度 */
              window.api.toast({
                msg: "正在下载应用" + ret.percent + "%",
                duration: 2000
              });
            }
            if (ret && 1 == ret.state) {
              /* 下载完成 */
              var savePath = ret.savePath;
              window.api.installApp({
                appUri: savePath
              });
            }
          }
        );
      }
    },
    // 复制
    onCopy() {
      this.$toast("地址复制成功!");
    },
    onError() {
      this.$toast("地址复制失败!");
    },
    // 提交
    onSubmit() {
      const _this = this;
      if (!this.isMoblie) {
        this.$toast("手机号输入错误");
        return false;
      }
      if (this.pwd === "") {
        this.$toast("密码输入错误");
        return false;
      }
      window.api.showProgress({
        title: "登录中...",
        text: "先喝杯茶...",
        modal: false
      });
      window.api.ajax(
        {
          url: "http://118.25.10.223:8095/nt/user/login",
          method: "post",
          dataType: "json",
          returnAll: false,
          data: {
            values: {
              mobile: this.mobile,
              pwd: this.pwd
            }
          }
        },
        function(ret, err) {
          window.api.hideProgress();
          if (ret) {
            if (ret.code === 0) {
              _this.$storage.set("token", ret.msg);
              _this.$storage.set("mobile", _this.mobile);
              _this.$storage.set("pwd", _this.pwd);
              if (_this.$storage.has("iconItems")) {
                let iconItems = _this.$storage.get("iconItems");
                iconItems.forEach(item => {
                  item.opened = "待启动";
                  item.startFlag = false;
                  item.content = [];
                });
                _this.$storage.set("iconItems", iconItems);
              }
              _this.onGetUserInfo();
            } else {
              _this.$toast(ret.msg);
            }
          } else {
            this.$toast(err.msg);
          }
        }
      );
    },
    // 获取当前用户信息
    onGetUserInfo() {
      const _this = this;
      window.api.ajax(
        {
          url: "http://118.25.10.223:8095/t/user/get_current_user",
          method: "post",
          dataType: "json",
          returnAll: false,
          data: {
            values: {}
          },
          headers: {
            token: this.$storage.get("token")
          }
        },
        function(ret, err) {
          if (ret) {
            if (ret.code === 0) {
              _this.$store.commit("SET_ACTIVATIONCODE", ret.data.user.activationCode);
              _this.$storage.set("activationCode", ret.data.user.activationCode);
              _this.$toast({
                message: "登录成功",
                onClose: () => {
                  _this.onOpenWin("home");
                }
              });
            } else {
              _this.$toast('用户信息获取失败')
            }
          } else {
            this.$toast(err.msg);
          }
        }
      );
    },
    // 新窗口
    onOpenWin(name) {
      window.api.openWin({
        name: name,
        url: `./` + name + `.html`,
        bgColor: "#fff"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  @include flex($direction: column, $flexWrap: nowrap, $justifyContent: center);
  .login-header {
    @include flex($justifyContent: center);
    img {
      width: 48px;
      margin-right: 10px;
    }
    span {
      font-size: 32px;
    }
  }
  .login-title {
    margin: 20px 0 40px;
  }
  .login-form {
    width: 300px;
  }
}
</style>

<style lang="scss">
.login {
  .van-dialog {
    border-radius: 5px !important;
    .van-dialog__header {
      padding: 15px 0 !important;
    }
    .van-dialog__content {
      padding-bottom: 15px;
      .van-cell {
        margin-bottom: 0 !important;
        background: #fff;
        .van-cell__title {
          flex: 0 0 80px;
        }
        .van-cell__value {
          flex: 1;
          span {
            @include ell2(1);
          }
        }
        .van-icon {
          @include flex();
        }
      }
    }
  }
  .van-cell {
    background: #fafafa;
    margin-bottom: 15px;
    &:not(:last-child)::after {
      border: none;
    }
    .van-cell__title {
      flex: 1 !important;
      .van-cell__label {
        .van-cell {
          padding: 8px 0 !important;
        }
      }
    }
  }

  .van-button--primary {
    background: #fafafa;
    border: 1px solid #fafafa;
    .van-button__text {
      color: #cdcdcd;
    }
    &.active {
      .van-button__text {
        color: #e4393c;
      }
    }
  }
  .login-form__button {
    margin-top: 15px;
    .van-button {
      width: 100%;
      height: 40px;
      background: #ededed;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 500;
      color: #cdcdcd;
      border: 1px solid #ededed;
    }
    &.active {
      .van-button {
        background: #e4393c;
        border: 1px solid #e4393c;
        color: #fff;
      }
    }
  }
  .login-form__tip {
    line-height: 70px;
    @include flex();
    span {
      color: #e4393c;
    }
  }
}
</style>

